<template>
	<view class="container pageBg">
		<view class="form-container pageBg">
			<!-- 标题 -->
			<view class="title">重置密码</view>

			<!-- 手机号输入 -->
			<view class="input-group">
				<text class="label">手机号</text>
				<input v-model="phone" class="input" type="number" placeholder="请输入注册手机号" maxlength="11" />
			</view>

			<!-- 验证码输入 -->
			<view class="input-group">
				<text class="label">验证码</text>
				<input v-model="verificationCode" class="input" placeholder="请输入6位验证码" maxlength="6" />
				<view class="input-group">
					<img class="sms-btn" :src="yanzhengma" @click="getYZM" alt="验证码">
				</view>
			</view>

			<!-- 新密码输入 -->
			<view class="input-group">
				<text class="label">新密码</text>
				<input v-model="newPassword" class="input" password placeholder="请输入新密码（8-20位字母+数字）" />
			</view>

			<!-- 确认密码输入 -->
			<view class="input-group">
				<text class="label">确认密码</text>
				<input v-model="confirmPassword" class="input" password placeholder="请再次输入新密码" />
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="handleSubmit">提交重置</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'

	// 响应式数据
	const phone = ref('')
	const smsCode = ref('')
	const newPassword = ref('')
	const confirmPassword = ref('')

    const password = ref('')
	const yanzhengma = ref('')
	const verifyCodeToken = ref('')
	const verificationCode = ref('')

	// 页面挂载时自动触发
	onMounted(() => {
		console.log('页面初始化，开始请求验证码...')
		getYZM()
	})
	// 倒计时文本
	const countdownText = computed(() => {
		return count.value > 0 ? `${count.value}s后重新获取` : '获取验证码'
	})
	const getYZM = async () => {
		try {
			const res = await uni.request({
				url: 'http://localhost:8081/sysUser/generate/verify/code',
				method: 'GET'
			})
			console.log(res)
			yanzhengma.value = `data:image/jpeg;base64,${res.data.result.image}`
			verifyCodeToken.value = res.data.result.verifyCodeToken
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: "验证码获取失败",
				icon: 'none'
			})
		}
	}
	// 提交重置
	const handleSubmit = () => {
		// 表单验证
		if (!/^1[3-9]\d{9}$/.test(phone.value)) {
			uni.showToast({
				title: '请输入有效的手机号',
				icon: 'none'
			})
			return
		}
	
		if (newPassword.value !== confirmPassword.value) {
			uni.showToast({
				title: '两次输入密码不一致',
				icon: 'none'
			})
			return
		}
		password.value=newPassword.value
	
		uni.request({
			url: 'http://localhost:8081/sysUser/unPassword',
			method: 'POST',
			data: {
				verifyCodeToken: verifyCodeToken.value,
				verificationCode: verificationCode.value,
				phone: phone.value,
				password: password.value
			},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
		}).then((res) => {
				if (res.data.code == '200') {
					console.log(111)
					uni.showToast({
						title: '密码重置成功'
					})
					uni.navigateTo({
						url:'/pages/login/login'
					})
				} else {
					getYZM()
					uni.showToast({
						title: res.data.message || '密码重置失败',
						icon: 'none'
					})
				}
			})
		}
		
</script>

<style scoped>
	/* 复用注册页样式 */
	.container {
		padding: 40rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-container {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #333;
		text-align: center;
		margin-bottom: 60rpx;
		font-weight: bold;
	}

	.input-group {
		margin-bottom: 40rpx;
		position: relative;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.input {
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.sms-btn {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
	}

	.sms-btn[disabled] {
		background-color: #eee;
		color: #999;
	}

	.submit-btn {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: white;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
	}
</style>